<template>
  <div id="app">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in images" :key="image.id">
        <img class="listimg" :src="'http://liufusong.top:8080'+ image.imgSrc">
      </van-swipe-item>
    </van-swipe>
    <div class="search">
      <h4 class="city" @click="citylist">{{ $store.state.city.label }}</h4>
      <van-icon class="jiantou" name="arrow-down" @click="citylist" />
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <van-icon class="location" name="location-o" @click="onmap" />
    <van-grid :column-num="4">
      <van-grid-item to="/layout/find">
        <div class="box">
          <van-icon name="wap-home" size="30" color="green" />
        </div>
        <span class="txt">整租</span>
      </van-grid-item>
      <van-grid-item to="/layout/find">
        <div class="box">
          <van-icon name="friends" size="30" color="green" />
        </div>
        <span class="txt">合租</span>
      </van-grid-item>
      <van-grid-item to="/map">
        <div class="box">
          <van-icon name="map-marked" size="30" color="green" />
        </div>
        <span class="txt">地图找房</span>
      </van-grid-item>
      <van-grid-item @click="rent">
        <div class="box">
          <van-icon name="wap-home" size="30" color="green" />
        </div>
        <span class="txt">去出租</span>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="rent">
        <span>租房小组</span>
        <a href="#">更多</a>
      </div>
      <div class="information">
        <van-grid :column-num="2" :gutter="10" direction="horizontal">
          <van-grid-item v-for="val in list" :key="val.id">
            <img :src="'http://liufusong.top:8080'+ val.imgSrc">
            <span>{{ val.title + val.desc }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getImg, getRent, hotCity } from '@/api/home.js'

import { mapState } from 'vuex'
export default {
  data() {
    return {
      images: [],
      value: '',
      list: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.imgList()
    this.Rent()
    this.gethotCity()
  },

  methods: {
    async imgList() {
      const res = await getImg()
      // console.log(res.data.body)
      this.images = res.data.body
    },
    async Rent() {
      const res = await getRent()
      // console.log(res.data.body)
      this.list = res.data.body
    },
    citylist() {
      this.$router.push('/citylist')
    },
    onmap() {
      // console.log(123)
      this.$router.push('/map')
    },
    rent() {
      if (this.user) {
        this.$router.push('/renting')
      } else {
        this.$router.push('/login')
      }
    },
    async gethotCity() {
      const res = await hotCity()
      console.log(res.data)
      this.$store.commit('getcity', res.data.body[0])
    }

  }

}
</script>

<style scoped lang='less'>
#app{
  background-color: #f6f5f6;
}
/deep/[class*=van-hairline]::after{
  border: 0;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .listimg{
    width: 100%;
  }
  .van-swipe-item{
    height: 212px;
  }
  .swipe{
    position: relative;
  }
  .search{
    position: absolute;
    display: flex;
    align-items: center;
    width: 310px;
    height: 35px;
    line-height: 6px;
    top: 25px;
    left: 32px;
    border-radius: 3px;
    background-color: #fff;
  }
  .van-search{
    padding: 0;
    width: 200px;
  }
  h4{
    font-size: 12px;
    margin-right: 3px;
    margin-left: 5px;
  }
  .jiantou{
    margin-right: 3px;
  }
  .location{
    position: absolute;
    top: 34px;
    right: 10px;
  }
  .txt{
    font-size: 12px;
  }
  .rent{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 345.2px;
    span{
      margin: 15px 0 15px 10px;
      font-size: 14px;
      color: #333;
    }
    a{
      margin: 15px 0 15px 10px;
      font-size: 12px;
      color: #787d82;
    }
  }
  .information{
    padding-bottom: 10px;
    img{
      width: 50px;
      height: 50px;
    }
    span{
      margin-left: 10px;
      font-size: 14px;
      width: 70px;
    }
  }
  .box{
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    background-color: rgba(240, 240, 240, 0.5);
  }

</style>
